import React, { Component } from 'react'

export default class CheckeboxGroup extends Component {

  state = {
    values:''
  }

  componentDidMount(){
    this.setState({ values: this.props.values})
  }

  handleChange = (event) =>{
    this.setState({ values: event.target.value})
    this.props.handleRadioChange && this.props.handleRadioChange(this.state.values)
  }
  render() {
    let checkedName = "inlineRadioOptions" + Date.now()
    return (
      <div className="radio col-sm-10">
        {
          this.props.opctions.map(( item , index )=>(
            <label key={'radio' + index} className="radio-inline">
              <input 
                onChange={this.handleChange}
                checked={this.state.values.includes(item.label)} 
                type="radio" 
                name={checkedName}
                value={item.label} /> {item.value}
            </label>
          ))
        }
      </div>
    )
  }
}
